<template>
    <div class="page dealEmergencyApply-page" data-page="exam">
        <div class="link-page-nav">
            <a href="#" class="link" @click='$root.backToTab()'>
                <i class="iconfont icon-zuo"></i>
            </a>

        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">待考 <div style="float: right;text-align: center; ">
                    <i class="iconfont icon-APPicon_xuexilishi" @click="goHistoryLists"></i>
                </div>
            </div>
        </div>
        <div class="page-content" style="padding-bottom: 120px;">
            <ul class="exam-items" id="waitItems_{{getNewId}}">

            </ul>
        </div>
    </div>
</template>
<script>
    return {
        data() {
            return {
                getNewId: (new Date()).getTime(),
                pageName:'exam'
            }
        },
        mounted() {
        },
        methods: {
            
            getDataList: function () {
                let self=this
                let params = {
                    queryType: 0,
                    pageSize: 0,
                    pageIndex: 0,
                    examAccount: userInfor.accountName,
                    detailStatus: 0
                }
                Dao.getExamListForApp(params, function (res) {
                        var html = '';
                        var arr = res
                        // arr=[{name:'zz',beginTime:'',endTime:'',timeLimit:'',totalQuestion:'',id:'1'}]
                        if(arr.length>0){
                        for (var i = 0; i < 1; i++) {
                            html += ' <li class="exam-item">'
                            html += '        <div class="item-name"><span>' + arr[i].name +'</span></div>'
                            html += '       <div class="item-time">'
                            html += '            <span>考试有效期</span><span>'+arr[i].beginTime+'至'+arr[i].endTime+'</span>'
                            html += '        </div>'
                            html += '       <div class="item-total">'
                            html += '          <span>答题限时</span><span>'+arr[i].timeLimit+'分钟</span>'
                            html += '     </div>'
                            html += '   <div class="item-btn">'
                            html += '              <div class="item-btn-l">总分100分/总'+arr[i].totalQuestion+'题</div>'
                            html += '      <div class="goexam" dataId=' + arr[i].id + '><span >考试</span>'
                            html += '    </div>'
                            html += '  </li>'
                        }
                        jQuery(`#waitItems_${self.getNewId}`).append(html)
                    }else{
                        jQuery(`#waitItems_${self.getNewId}`).append(`<img src="${staticPath }img/emptyImg/defaultnone.png" style="width:100%">`)
                    }
                     
                        jQuery(`#waitItems_${self.getNewId}`).on('click', '.goexam', function (e) {
                            var itemId = jQuery(this).attr('dataId')
                            app.router.navigate(`/examPageIndex/${itemId}`);
                        })
                    
                })
            },
            goHistoryLists: function () {
                app.router.navigate(`/history/`);
            }
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                // self.getDataList()
            },
            pageAfterIn: function () {
                var self = this;
                jQuery(`#waitItems_${self.getNewId}`).html('')
                self.getDataList()

            }
        }
    }

</script>
<style scoped>
    .icon-APPicon_xuexilishi {
        font-size: 30px;
        color: #000;
    }

    .exam-items {
        padding: 20px;
    }

    .exam-item {
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(225, 225, 225, 0.9);
        box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 6px;
    }

    .item-name {
        font-size: 18px;
        color: rgba(51, 51, 51, 1);
        margin-bottom: 20px;
        font-weight: bold;
    }

    .item-time,
    .item-total {
        font-size: 14px;
        margin-bottom: 10px;
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        align-content: flex-start;
        color: rgba(51, 51, 51, 1)
    }

    .item-time span:nth-child(1),
    .item-total span:nth-child(1) {
        display: block;
        width: 70px;
        text-align: left;
        color: rgba(153, 153, 153, 1);
        margin-right: 20px;
    }

    .item-time span:nth-child(2),
    .item-total span:nth-child(2) {
        flex: 1;
    }

    .item-btn {
        border-top: 1px solid rgba(225, 225, 225, 1);
        margin: 0 -20px;
      
       padding: 20px 20px 0;
        font-size: 14px;
        position: relative;
    }

    .item-btn-l {
        font-weight: 400;
        color: rgba(36, 113, 202, 1);
    }

    /* .right {
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-left: 7px solid #000;
        border-bottom: 7px solid transparent;
        font-size: 0;
        line-height: 0;
    } */
    .icon-youjiantoushixinxiao{
        font-size: 30px;
        position: absolute;
        top: 8px;
        right: 0;
    }
    .item-btn .goexam {
        font-weight: 400;
        color: rgba(34, 34, 34, 1);
        overflow: hidden;
    }

    .item-btn .goexam span {
        margin-right: 10px;
        display: block;
        float: right;
        background: rgba(36, 113, 202, 1);
        padding: 5px 15px;
        border-radius: 15px;
        color: #ffffff;
        min-width: 86px;
        text-align: center;
        box-sizing: border-box;
    }
</style>